(function () {
  const id = location.search.substring(4);
  axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
  getData()
  async function getData(){
    const {data:{data:res}} = await axios.get(`/recipeInfo/${id}`)
    console.log(res)
    renderDetail(res)
  }

  // 去除 json 中多余 \
  function pattern(a) {
    let newA = a.replaceAll('/', '')
    newA = JSON.parse(newA)
    return newA
  }

  // 渲染数据
  function renderDetail(data) {
    let {
      author,
      context,
      description,
      img,
      raw_fu_list,
      raw_list,
      raw_tl_list,
      raw_type,
      title,
    } = data;
    // 姓名，菜名
    document.querySelector(
      '.title-box'
    ).innerHTML = `<h3>${title}</h3><p>${author}</p>`
    // 图片，描述
    const reImg = 'http://124.223.14.236:3001/public/' + img;
    document.querySelector('img.show-img').src = reImg;
    document.querySelector('blockquote').innerHTML = `
      <span
      class="txt_tart"></span>${description}<span
      class="txt_end">
    `
    // 主料 list
    renderList(raw_list, 'raw_list')

    // 辅料
    renderList(raw_fu_list, 'raw_fu_list')

    // 调料
    renderList(raw_tl_list, 'raw_tl_list')

    // type
    renderList(raw_type, 'raw_type')

    // 做法步骤
    document.querySelector('#title').innerHTML = `${title}的做法步骤`
    document.querySelector('#context').innerHTML = context
  }

  // 调料函数
  function renderList(raw, domId) {
    let newraw = pattern(raw);
    document.querySelector(`#${domId}`).innerHTML = newraw
      .map((item) => {
        return `
        <li>
          <span class="category_s1">
              <a href="/YuanLiao/ZhongJinMianFen/" title="面粉的做法" target="_blank"><b>${item.name}</b></a>
          </span>
          <span class="category_s2">${item.num}</span>
        </li>
      `
      })
      .join('')
  }
})()